<template>
    <div>
        <div class="top">
            <div class="top_button">
                <div class="return" @click="returnPage">
                    <image :src="imageBaseUrl + '/img/return.png'"></image>
                </div>
                <div class="line"></div>
                <div class="homepage" @click="goHome">
                    <image :src="imageBaseUrl + '/img/home.png'"></image>
                </div>
            </div>
            <div>景区图片</div>
        </div>
        <div class="list">
            <div class="lists">游乐园 1</div>
        </div>
        <div class="title">游乐园 1</div>
        <div class="img">
            <uv-image :src="datas.img" width="120px" height="120px" @click="previewImage"></uv-image>
        </div>
        <div class="null">没有更多了...</div>
        <div class="bottom">
            <div class="bottom_left">
                <div class="bottom_left_text" style="font-size: 18px;font-weight: 500;">五龙山野生动物王国</div>
                <div class="bottom_left_text" style="font-size: 14px;"><span
                        style="color: red;font-size: 18px;">￥80</span>起</div>
            </div>
            <view class="book-button" @click="showPolicy">
                <text>查看门票</text>
            </view>
        </div>
        <div class="tickets" v-show="!isShow">
            <view class="ticket-header1">
                <text class="ticket-title1">门票</text>
            </view>
            <view class="ticket-list">
                <view class="ticket-item" v-for="(item, index) in data" :key="index">
                    <view class="ticket-info">
                        <text class="ticket-name">{{ item.name }}</text>
                        <text class="original-price">{{ item.children[0].original_price }}</text>
                    </view>
                    <view class="ticket-availability">
                        <text class="available-tag">可订明日</text>
                        <text class="current-price"><text>{{ item.children[0].current_price }}</text>起</text>
                    </view>
                    <view class="ticket-policy">
                        <text class="policy-tag">随时退，无需退票</text>
                        <text class="discount-tag">优惠￥{{ item.children[0].original_price -
                            item.children[0].current_price
                            }}</text>
                    </view>
                    <view class="ticket-actions">
                        <view class="buy-notice" @click="showPolicys">

                            <text>已售{{ item.children[0].num }}</text>
                            <text style="margin-left: 20px;">购买须知</text>
                            <image :src="imageBaseUrl + '/img/right.png'" mode="aspectFit"></image>
                        </view>
                        <view class="book-button1" @click="book(item.children)">
                            <text>预定</text>
                        </view>
                    </view>
                </view>
            </view>
        </div>
        <div class="curtain" v-if="!isShow" @click="showPolicy"></div>
        <div class="curtains" v-if="isShows" @click="showPolicys"></div>
        <view class="ticket-details" v-show="isShows">
            <view class="ticket-details-title">购买须知</view>
            <div class="ticket-details-content" v-html="processedHtml"></div>
            <button class="registers" @click="showPolicys">关闭</button>
        </view>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import api from '../../api/user/index.js'
import config from '../../config/index.js';
const imageBaseUrl = config.image;//图片地址
const datas = ref({})//图片
const data = ref({})//门票
const isShow = ref(true)//显示隐藏
const isShows = ref(false)//显示隐藏
const processedHtml = ref('');//html数据

// 图片预览方法
const previewImage = () => {
    console.log(datas.value.img)
    if (datas.value.img) {
        uni.previewImage({
            urls: [datas.value.img], // 预览的图片数组，这里只有一张图片
            current: datas.value.img // 当前显示的图片
        });
    }
}
//查看门票
const showPolicy = () => {
    isShow.value = !isShow.value;
}
//购买须知
const showPolicys = () => {
    isShows.value = !isShows.value;
}
//返回
const returnPage = () => {
    uni.navigateBack({
        delta: 1
    });
}
//主页
const goHome = () => {
    uni.navigateTo({
        url: '/pages/home/home'
    })
}
//预定
const book = (item) => {
    console.log(item[0]);
    //存储目标订单数据
    uni.setStorageSync('target', item[0]);
    uni.navigateTo({
        url: '/pages/submit/submit'
    });
}
onMounted(() => {
    // 获取图片数据
    api.img({
        scenic_id: 3
    }).then(res => {
        datas.value = res.data[0];
    });
    // 获取景区数据
    api.details({
        scenic_id: 3
    }).then(res => {
        data.value = res.data || [];
        if (data.value.length > 0 && data.value[0].children && data.value[0].children[0]) {
            processedHtml.value = data.value[0].children[0].deatils.replace(/&nbsp;/g, ' ');
            console.log(processedHtml.value);
        }
        // 数据加载完成后，确保视频状态正确
    }).catch(err => {
        // 错误处理
    });
})
</script>

<style lang="scss" scoped>
.registers {
    width: 90%;
    height: 35px;
    background-color: #FF8D1A;
    border-radius: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    margin-top: 20px;
    font-size: 15px;
    position: fixed;
    bottom: 20px;
    left: 5%;
}

.ticket-details-title {
    font-size: 18px;
    width: 100%;
    padding: 10px;
    text-align: center;
}

.ticket-details-content {
    width: 90%;
    margin-left: 5%;
    margin-bottom: 80px;
}

.ticket-details {
    width: 100vw;
    height: 500px;
    border-radius: 15px 15px 0 0;
    overflow-y: auto;
    position: fixed;
    bottom: 0;
    background-color: white;
    z-index: 999;

}

.curtain {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(134, 134, 134, 0.475);

}

.curtains {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(134, 134, 134, 0.475);
    z-index: 3;
}

.tickets {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 350px;
    overflow-y: auto;
    background-color: white;
    border-radius: 15px 15px 0 0;
    z-index: 2;
}

//门票列表
.ticket-list {
    padding: 15px;
    background-color: #fff;

    .ticket-item {
        padding-bottom: 15px;
        margin-bottom: 15px;
        border-bottom: 1px solid #eee;

        .ticket-info,
        .ticket-availability,
        .ticket-policy,
        .ticket-actions {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }

        .ticket-name {
            font-size: 16px;
            font-weight: bold;
            color: #333;
        }

        .original-price {
            font-size: 14px;
            color: #999;
            text-decoration: line-through;
        }

        .available-tag {
            font-size: 14px;
            color: #138aec;
        }

        .current-price text {
            font-size: 19px;
            color: #f00;
        }

        .policy-tag {
            font-size: 14px;
            color: #138aec;
        }

        .discount-tag {
            font-size: 12px;
            color: #f00;
            border: 1px solid #f00;
            padding: 2px 5px;
            border-radius: 3px;
        }

        .buy-notice {
            display: flex;
            align-items: center;
            gap: 5px;

            text {
                font-size: 14px;
                color: #666;
            }

            image {
                width: 15px;
                height: 15px;
            }
        }

        .book-button1 {
            background-color: #f00;
            color: #fff;
            padding: 5px 15px;
            border-radius: 15px;
            font-size: 14px;
        }
    }
}

.ticket-header1 {
    margin-top: 10px;
    padding-left: 5%;
    background-color: white;

    .ticket-title1 {
        font-size: 18px;
        font-weight: bold;
        color: #333;
    }
}

.bottom_left {
    width: 60%;
    margin-left: 10px;
}

.bottom {
    display: flex;
    height: 50px;
    align-items: center;
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: #fff;
}

.book-button {
    background-color: #f00;
    width: 40%;
    height: 30px;
    line-height: 30px;
    text-align: center;
    color: #fff;
    padding: 5px 15px;
    border-radius: 30px;
    margin-right: 20px;
}

.null {
    text-align: center;
    margin-top: 40px;
    color: #8a8a8a;
}

.img {
    margin-left: 5%;
}

.title {
    font-size: 20px;
    margin-top: 20px;
    margin-left: 3%;
    margin-bottom: 20px;
}

.lists {
    width: 100px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    background-color: #EEE9BF;
    margin-left: 5%;
    border-radius: 5px;
    border: 1px solid #a99803;
}

.list {
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.line {
    width: 1%;
    background-color: #8a8a8a;
    height: 70%;
    margin-top: 5%;
}

.return {
    width: 49.5%;
    height: 100%;
    text-align: center;
    line-height: 25px;
}

.return image {
    width: 20px;
    margin-top: 2px;
    height: 20px;
}

.homepage {
    width: 49.5%;
    height: 100%;
    text-align: center;
    line-height: 25px;
}

.homepage image {
    width: 18px;
    margin-top: 3px;
    height: 18px;
}

.top_button {
    width: 70px;
    height: 25px;
    display: flex;
    border-radius: 15px;
    /* margin-top: 30px; */
    margin-left: 20px;
    margin-right: 20%;
    border: 1px solid rgb(192, 192, 192);
}

.top {
    width: 100%;
    height: 50px;
    margin-top: 30px;
    border-bottom: 1px solid rgb(203, 203, 203);
    background-color: rgb(255, 255, 255);
    position: relative;
    color: #8a8a8a;
    display: flex;
    align-items: center;
}
</style>